<template>
	<view style="display: flex; gap: 36rpx; height: 100%;">
		<view class=""
			style="flex: 1; display: flex; flex-direction: column; height: 100%; justify-content: center; align-items: flex-start;">
			<input type="text" value="" placeholder="手机号" maxlength="11" v-model="pho" @input="onIptPho" />
			<view class="" style="display: flex;">
				<input type="text" value="" placeholder="验证码" maxlength="6" />
				<button type="default">获取验证码</button>
			</view>
		</view>
		<view class="" style="flex: 1; display: flex; height: 100%; justify-content: center; align-items: center;">
			<view class="">
				<button type="primary" style="width: 180rpx;">登录</button>
				<button type="default" @click="goReg">前往注册</button>
				<view class="">
					<text @click="goPwdLogin">账号密码登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	function ero(txt) {
		uni.showToast({
			title: txt,
			icon: "error"
		})
	}

	function checkIsNull(title, val) {
		if (!val) {
			ero(title + "不能为空")
			return true
		}
		return false
	}

	export default {
		data() {
			return {
				pho: ""
			}
		},
		methods: {
			goReg() {
				uni.navigateTo({
					url: "../reg/reg"
				})
			},
			goPwdLogin() {
				uni.navigateTo({
					url: "../pwdlogin/pwdlogin"
				})
			},
			onSub() {
				if (checkIsNull("手机号", this.pho)) {
					return;
				}
				if (!(/1(3|5|7){9}/).test(this.pho)) {
					return ero("手机号格式有误")
				}
			},
			onIptPho(e) {
				const v = e.detail.value
				const f = v.replace(/[^0-9]/g, '')
				this.act = v;
				this.$nextTick(function() {
					this.act = f;
				})
			}
		}
	}
</script>

<style>

</style>
